<template>
	<view class="login-container">
		<view @click="back" style="position: absolute;top: 40px;left:20px;width: 30px;height: 30px;display: flex;align-items: center;justify-content: center;">
			<u-icon name="close" color="#5a67d8" size="28"></u-icon>
		</view>
		<view style="width: 80%;display: flex;flex-direction: column;align-items: center;margin: 200rpx auto; margin-bottom: 0;">
			<image src="/static/t.png" mode="aspectFill" style="width: 90px;height: 90px;border-radius: 50%;"></image>
			<view style="font-weight: bolder;margin-top: 40rpx;font-size: 20px;">
				欢迎来到<text style="color: #5a67d8;font-weight: bolder;margin-left: 4rpx;font-size: 21px;">时光轨迹</text>
			</view>
		</view>
		<!-- 主表单容器 -->
		<view class="form-card animate__animated animate__fadeInUp">
			<view style="width: 100%; display: flex;align-items: center;justify-content: space-between;	margin-bottom: 56rpx;">
						<view class="form-title" style="font-weight: bolder">忘记密码</view>
						<view>
			<!-- 			<u-tag @click="goRegister" bgColor="#5a67d8" borderColor="#5a67d8" text="注册"></u-tag> -->
						</view>
			</view>
	
			
			<!-- 手机号输入 -->
			<u-input 
				v-model="username"
				placeholder="请输入邮箱"
				placeholder-style="color: #a0aec0"
				class="input-item"
				clearable
		:adjust-position="false"
				border="false"
				:input-style="{paddingLeft: '12rpx'}"
			></u-input>

			<!-- 密码输入 -->
			<u-input 
				v-model="password"
				placeholder="请输入认证码"
				placeholder-style="color: #a0aec0"
				class="input-item"
	:adjust-position="false"
				clearable
	
				border="false"
				:input-style="{paddingLeft: '12rpx'}"
			></u-input>
		<u-input 
				v-model="password"
				placeholder="请输入密码"
				placeholder-style="color: #a0aec0"
				class="input-item"
				type="password"
				clearable
		:adjust-position="false"
				border="false"
				:input-style="{paddingLeft: '12rpx'}"
			></u-input>

	
			<!-- 登录按钮 -->
			<u-button 
				class="submit-btn"
				type="primary"
				:loading="isLoading"
				@click="handleLogin"
				hover-class="btn-hover"
			>
			完成
			</u-button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			username: '',
			password: '',
			agreed:false,
			rememberMe: false,
			isLoading: false
		};
	},
	methods: {

		back(){
			this.$Router.push("/pages/login/login")
		},
		handleLogin() {
			// 基础校验（可根据需求扩展）
			if (!/^1[3-9]\d{9}$/.test(this.username)) {
				uni.showToast({ title: '请输入有效手机号', icon: 'none' });
				return;
			}
			if (this.password.length < 6 || this.password.length > 16) {
				uni.showToast({ title: '密码需6-16位', icon: 'none' });
				return;
			}

			this.isLoading = true;
			// 模拟API请求（实际替换为uni.request）
			setTimeout(() => {
				this.isLoading = false;
				uni.showToast({ title: '登录成功', icon: 'success' });
				uni.navigateBack(); // 或跳转到目标页面
			}, 1500);
		},
		handleForgot() {
			uni.navigateTo({ url: '/pages/forgot-password/forgot-password' });
		}
	}
};
</script>

<style lang="scss" scoped>
/* 全局变量定义 */
$primary-color: #5a67d8;
$bg-gradient: linear-gradient(145deg, #e6f4ff 0%, #f0e9ff 100%);
$card-bg: rgba(255, 255, 255, 0.95);

.login-container {
	height: 100vh;
	background: $bg-gradient;
	padding: 0 40rpx;
	overflow: hidden;
	box-sizing: border-box;
	position: relative;
}

.form-card {
	background: $card-bg;
	border-radius: 28rpx;
	padding: 60rpx 40rpx;
	box-shadow: 0 12rpx 36rpx rgba(90, 103, 216, 0.1);
	backdrop-filter: blur(10rpx);
	margin: 80rpx 0; /* 调整表单垂直居中 */

	.form-title {
		font-size: 48rpx;
		color: #1a202c;
		font-weight: 600;
	
	}
}

.input-item {
	height: 96rpx;
	background: #f7fafc;
	border-radius: 16rpx;
	margin-bottom: 32rpx;
	transition: all 0.3s;

	&:focus-within {
		background: #edf2f7;
		transform: scale(1.02);
	}

	.u-input__content {
		padding: 0 32rpx;
	}
}

.action-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 24rpx 0 48rpx;

	.forgot-link {
		color: $primary-color;
		font-size: 30rpx;
		transition: color 0.3s;

		&:hover {
			color: darken($primary-color, 10%);
		}
	}
}
.agreement-row {
	margin: 24rpx 0 48rpx;
	font-size: 30rpx;
	color: #4a5568;
}

.submit-btn {
	height: 100rpx;
	font-size: 36rpx;
	border-radius: 52rpx;
	background: $primary-color;
	box-shadow: 0 8rpx 24rpx rgba(90, 103, 216, 0.3);
	transition: transform 0.2s;

	&.btn-hover {
		transform: scale(0.98);
	}
}
</style>
